<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.common.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<title>全部学生总分展示</title>
<style>
#standard {  
  display: -webkit-flex;  
  -webkit-justify-content: left;  
  -webkit-align-items: left;  
  padding:100px;
}
input{
	background: #3398DB;
	height:30px;
	width:50px;
}
#download{
	display: -webkit-flex;  
	-webkit-justify-content: center;  
	-webkit-align-items: center; 
}

}
</style>
</head>
<body>
<div style="position:absolute;z-index:-1;width:100%;height:100%;">
    	<img src="img/2.jpg" width="100%" height="100%" />
</div>
	<div id="standard">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1500px; height: 500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var url = 'ShowAllStudentServlet';//获得销量、营业额、x轴的数据
        $.getJSON(url).done(function(json) {//向url请求数据，如果成功，将数据放到json
            // 2.从json中获得数据 ，
            scores = json.allScore;//营业额
            stuName = json.stuName;//月份

            // 3.配置option
            var option = {
            		color: ['#3398DB'],
                title : {
                    text : '总成绩展示'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
               //     formatter: "{a} <br/>{b}: {c} %"
                },
                dataZoom: {
                    show: true,
                    start : 0,
                    end:20,
                    height:20,//滚动条高度
            /*        backgroundColor:'#effbfe',//滚动条滚动区域背景色*/
                    dataBackgroundColor:'#007acc',//有数据时候数据在滚动条上显示的颜色
                   fillerColor:'#b7e9f8',//滚动条条条本身的颜色
                    handleColor:'#56abe4',//控制滚动条长短（滚动条两边）的爪爪颜色
                    handleSize:10 //爪爪的宽度
                },
                legend : {
                    data : [ '成绩' ],
                },
                calculable : true,
                xAxis : {
                	type : 'category',
                    data : stuName,
                    axisTick: {
                        alignWithLabel: true
                    },
             	 	  axisLabel:{
                    interval:0,//横轴信息全部显示
                  //  rotate:-20,// -20度角倾斜显示
              	  }
                },
                yAxis : {},
                series : [ {
                    name : '成绩',
                    type : 'bar',
                    data : scores,
                } ],
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : true
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ 'line', 'bar' ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                }
            }
            myChart.setOption(option);
        })
       
    </script> 
    
    </div>
    <div id="download">
    	<form action="DownloadServlet" method="post">
    		<input type="submit" value="下载excel"style="height:50px;width:100px;"/>
		</form>
		<form action="ShowAverScore.jsp" method="post">
    		<input type="submit" value="查看平均分"style="height:50px;width:100px;"/>
		</form>
    </div>
</body>
</html>